<template>

  <div class="per" :id="id" :style="{ width: width, height: height }"></div>

</template>

<script>
  import echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/pie'

  export default {
    props: {
      id: {
        type: String,
        required: true
      },
      val: {
        type: [Number,String],
        required: true,
      },
      type: {
        type: String,
        default: 'normal'
      },
      width: {
        type: String,
        default: '100px'
      },
      height: {
        type: String,
        default: '100px'
      },
      content: {
        type: String
      }
    },
    data () {
      return {
        colorType: { // 颜色渐变类型
          'normal': ['#6984f9', '#433ac9'],
          'danger': ['#fb1c6f', '#8b343d'],
          'blue': ['#2367ff', '#1b9ba5']
        }
      }
    },
    watch: {
      val (val,oldval) {
        this.onReady()
      }
    },
    mounted () {
      this.onReady()
    },
    methods: {
      onReady () {
        const { id, val, content, type, colorType } = this
        const options = {
          tooltip: {
            trigger: 'item',
            formatter: `${content} : ${val}%`
          },
          series: [{
            type: 'pie',
            radius: ['95%', '100%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: [
                  `{header|${val}%}`,
                  `{footer|${content}}`
                ].join('\n'),
                rich: { // 环形内部样式设置
                  header: {
                    color: '#61e1ee',
                    fontSize: 22,
                    fontWeight: 900
                  },
                  footer: {
                    color: '#ffffff',
                    fontSize: 14,
                    padding: [0, 0, 5, 0]
                  }
                }
              }
            },
            data: [
              {
                value: parseInt(val),
                name: null,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: colorType[type][0] },
                      { offset: 1, color: colorType[type][1] }
                    ])
                  }
                }
              },
              {
                value: 100 - parseInt(val),
                name: null,
                itemStyle: {
                  normal: {
                    color: 'rgba(255, 255, 255, 0.2)'
                  }
                }
              }
            ]
          }]
        }
        const myPie = echarts.init(document.getElementById(id))
        myPie.setOption(options, true)
        window.addEventListener('resize', function () {
          myPie.resize()
        })
      }
    }
  }
</script>

